<template>
  <div class="commonBox bx">
    <div class="commonBoxNavBox bx">
      <ul class="commonBoxNav br mb14">
        <li v-for="(item,index) in msgData" :class="{active:index==navActiveStutas}">
          <router-link :to="item.path">{{item.name}}</router-link>
        </li>
      </ul>
    </div>
    <transition name='fade' mode='out-in'>
        <keep-alive>
      <router-view v-on:pageName='changeNavActiveStutas'></router-view>
</keep-alive>
    </transition>
  </div>
</template>

<script>
  export default {
    name: 'commonBox',
    data() {
      return {
        navActiveStutas: 0,
        liDataGet: [{
          title: '五年级1班'
        }, {
          title: '五年级2班'
        }, {
          title: '五年级3班'
        }, {
          title: '五年级4班'
        }, {
          title: '五年级5班'
        }],
        msgData: [{
          name: '荣誉管理',
          path: '/campus/honor'
        }, {
          name: '学校通知',
          path: '/campus/schoolNotice'
        }, {
          name: '德育考评',
          path: '/campus/moralityAssessment'
        }, {
          name: '考勤管理',
          path: '/campus/attendance'
        }],
        weekNameArr: ['一', '二', '三', '四', '五'],
        courseTimeArr: [],
        courseArr: []
      }
    },
    methods: {
      change: function (e) {
       // console.log(e)
      },
    },
    beforeRouteEnter(to, from, next) {
      //传给父组建值
      next(vm => {
        vm.$emit('pageName', to.name)
      })
    },
    methods: {
      changeNavActiveStutas: function (data) {
       // console.log(data)
        switch (data) {
          case 'honor':
            this.navActiveStutas = 0;
            break;
          case 'schoolNotice':
            this.navActiveStutas = 1;
            break;
          case 'moralityAssessment':
            this.navActiveStutas = 2;
            break;
          case 'attendance':
            this.navActiveStutas = 3;
            break;

        }
      }
    }
  }

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>


</style>
